<template>
	<view class="modal">
		<view class="modal-bkg" />
		<view class="modal-pop">
			<view class="close" @tap="close">
				<img src="@/static/icon/icon_16_close_w@2x.png" alt="">
			</view>
			<view class="pop-main">
				<view class="shop-img">
					<img v-if="checkItem.cover_url" :src="checkItem.cover_url" alt="">
					<img v-else src="../../static/img/img_goods_empty.jpg" alt="">
				</view>
				<view class="shop-desc">
					{{checkItem.sub_title}}
				</view>
				<view class="btn-area">
					
					<view class="btn">
						<view class="circle"></view>
						<view class="circle"></view>
						<view v-if="!authflag.getPhoneNumber">
							<wxAuthPhone>
								<view class="btn-main">
									幸运抽奖
								</view>
							</wxAuthPhone>
						</view>
						<view v-else class="btn-main" @click="lottery">
							幸运抽奖
						</view>
						<view class="btn-desc">消耗{{checkItem.lottery_point}}推荐积分</view>
					</view>
					<view class="btn">
						<view v-if="!authflag.getPhoneNumber">
							<wxAuthPhone>
								<view class="btn-main">
									直接兑换
								</view>
							</wxAuthPhone>
						</view>
						<view class="btn-main" v-else  @click="exchange">
							直接兑换
						</view>
						<view class="btn-link-img">
							<img src="@/static/img/img_64_task_thumb_06@2x.png" alt="">
						</view>
						<view class="btn-desc">消耗{{checkItem.exchange_point}}推荐积分</view>
					</view>
					
				</view>
				<view class="desc-main">
					注1·直接兑换商品，如商品仍有库存，您可直接获得该商品，兑换后后不可退换，若没有库存，将不会扣取推荐积分；
					注2·使用幸运抽奖后，将在截止日期自动开奖，开奖结果将通过短信以及微信模版消息进行通知；
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name: 'wx-auth',
		props: {
			authType: {
				type: Array,
				default(){
					return ['authAvatar']
				}
			},
			checkItem: {
				type: Object,
				default(){
					return {}
				}
			},
			
		},
		computed:{
			...mapState(['userinfo', 'authflag'])
		},
		data() {
			return {
				douyinnum: null
			};
		},
		methods: {
			close(){
				uni.$emit('pop_close')
			},
			lottery(){
				this.$api.setUserCost({
					prize_id: this.checkItem.id, 
					type: 1, // 标识抽奖
				}).then(res => {
					console.log(res)
					res.type = 1 // 标识抽奖
					uni.$emit('set_lottery_result', res)
					uni.$emit('refresh_prize_list', res)
				})
				// console.log('抽奖')
				// uni.showLoading({
				// 	icon: "none",
				// 	title: "抽奖中"
				// })
				// setTimeout(() => {
				// 	uni.hideLoading()
				// 	let result = {
				// 		type: 1 // 1 表示抽奖成功， 2 表示重复抽奖 3 表示 商品抽完 4 表示 活动结束 5 表示积分不足
				// 	}
				// 	uni.$emit('set_lottery_result', result)
				// }, 3000)
			},
			exchange(){
				// uni.showLoading({
				// 	icon: "none",
				// 	title: "直接兑换中"
				// })
				// setTimeout(() => {
				// 	uni.hideLoading()
				// 	let result = {
				// 		status: 1
				// 	}
				// 	uni.$emit('set_lottery_result', result)
				// }, 1000)
				this.$api.setUserCost({
					prize_id: this.checkItem.id, 
					type: 2, // 标识抽奖
				}).then(res => {
					console.log(res)
					res.type = 2 // 标识直接兑换
					uni.$emit('set_lottery_result', res)
					uni.$emit('refresh_prize_list', res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal{
		position: fixed;
		top: 0;
		z-index: 99;
		.modal-bkg{
			position: fixed;
			top: 0;
			background-color: rgba(0,0,0,.5);
			width: 100vw;
			height: 100vh;
		}
		.modal-pop{
			position: absolute;
			top: calc(50vh - 35vw);
			left: 5vw;
			width: 90vw;
			height: 88vw;
			border-radius: 12px;
			background-image: linear-gradient(224deg, #FFECEE 11%, #FFFFFF 100%);
			background-size: 90vw 88vw;
			background-position: bottom;
			.close{
				position: absolute;
				bottom: -17vw;
				right: calc(35vw );
				width: 19vw;
				height: 15vw;
				background: url('@/static/btn/btn_32_ghost_shadow_nor@2x.png');
				background-size: 19vw 15vw;
				display: flex;
				align-items: center;
				justify-content: center;
				img{
					width: 15px;
					height: 15px;
				}
			}
			.pop-main{
				// background: pink;
				.shop-img{
					width: 90vw;
					height: 47vw;
					// position: relative;
					margin-top: -23vw;
					text-align: center;
					font-size: 0;
					img{
						width: 47vw;
						height: 47vw;
					}
				}
				.shop-desc{
					font-size: 12px;
					color: #595959;
					text-align: center;
					font-weight: 500;
					margin-top: 12px;
					padding: 0 16px;
					height: 13.6vw;
					// 多行隐藏
					overflow: hidden;
					display: -webkit-box;
					font-weight: 500;
					text-overflow: ellipsis;
					-webkit-line-clamp: 3;  /*要显示的行数*/
					-webkit-box-orient: vertical;
				}
				.btn-area{
					width: 79vw;
					height: 96px;
					background: #FFFFFF;
					box-shadow: 0px 1px 12px 0px rgba(207,8,36,0.2);
					margin: 16px auto 0;
					display: flex;
					border-radius: 12px;
					text-align: center;
					.btn{
						margin: 6px;
						position: relative;
						flex: 1;
						
						.circle{
							width: 10px;
							height: 10px;
							position: absolute;
							right: -17px;
							top: -11px;
							border-radius: 50%;
							background-color: #FFECEE;
							&:nth-child(2){
								position: absolute;
								right: -17px;
								top: 84px;
								background-color: #FFECEE;
							}
						}
						.btn-main{
							width: 30vw;
							height: 16vw;
							line-height: 16vw;
							background-image: url('@/static/btn/btn_36_red_144_shadow_nor@2x.png');
							background-size:  30vw 16vw;
							color: #fff;
							margin: 0 auto;
							font-size: 14px;
							font-weight: 500;
						}
						.btn-desc{
							font-size: 26rpx;
							color: #F82045;
							font-weight: 500;
						}
						
						&:nth-child(2){
							
							border-left: 1px dashed rgba(207,8,36,0.2);
							position: relative;
							.btn-main{
								background-image: url('@/static/btn/btn_36_yellow_144_shadow_nor@2x.png');
								background-size:  30vw 16vw;
								color: #805340;
							}
							.btn-link-img{
								width: 128rpx;
								height: 128rpx;
								position: absolute;
								top: 0;
								left: 25vw;
								img{
									width: 128rpx;
									height: 128rpx;
								}
							}
						}
					}
				}
				.desc-main{
					width: 79vw;
					height: 11.7vw;
					font-size: 8px;
					color: #999999;
					font-weight: 400;
					margin: 16px auto 0;
				}
			}
		}
	}
</style>
